<template>
  <div>
    <table-box
      v-if="!showPicDetail"
      ref="pictureTable"
      :table-config="tableConfig"
      :dragable="true"
      :off-set="-50"
      :table-height="400"
      :other-filters="otherFilter"
      no-request
      click-row-selection
    />
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
  </div>
</template>

<script>
import { queryAreaData } from '@/api/storeConstruction'
import { getDictByPatchType } from '@/api/dataDict'
import detail from '../../../shopDrawing/management/detail.vue'
export default {
  name: 'PictureInfoTable',
  components: { detail },
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      rowId: '',
      showPicDetail: false,
      decorationTypeList: [],
      designRangeList: [],
      decoratScheduleList: [],
      designSpaceList: [],
      designBizTypeList: [],
      formData: {},
      constCode: '',
      otherFilter: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopDesignPicture/getPicture/pagenew`,
        hideFuncBar: true,
        pageSize: 10,
        sort: '',
        // order: 'desc',
        // sortersRow: [{ 'id': 'picType', 'property': 'picType', 'direction': 'ASC' },
        //   { 'id': 'expectEndTime', 'property': 'expectEndTime', 'direction': 'ASC' }],
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: 100
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'isOutpicUndecoration',
            label: '是否出图不装修',
            minWidth: 100,
            render: (creat, row) => {
              if (row.isOutpicUndecoration) {
                return <span>是</span>
              }
              return <span>否</span>
            }
          },
          {
            prop: 'decorationTaskCode',
            label: '关联装修任务',
            minWidth: 100
          },
          {
            prop: 'decorationTaskSchedule',
            label: '装修进度',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationTaskSchedule) {
                return
              }
              let list = []
              if (typeof (row.decorationTaskSchedule) === 'string') {
                list = row.decorationTaskSchedule.split(',')
              } else {
                list = row.decorationTaskSchedule
              }
              const arr = []
              this.decoratScheduleList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'actualEndTime',
            label: '实际完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      }
    }
  },
  computed: {},
  async created() {
    await this.getDictByPatchTypeAll(['DECORATION_RANGE', 'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE', 'DECORATION_SCHEDULE']).then(res => {
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.decoratScheduleList = res.DECORATION_SCHEDULE // 装修进度
      this.designSpaceList = res.BELONG_REGION // 设计区域
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
    })
    this.areaList = await this.getAreaData()
    this.constCode = this.detailData.constCode
    this.otherFilter = [{ 'id': 'constCode', 'property': 'constCode', 'operator': '=', 'value': this.constCode }]
    this.$nextTick(() => {
      this.$refs.pictureTable.initTableData()
    })
  },
  activated() {},
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    async getAreaData() {
      const dataForm = new FormData()
      dataForm.append('pageFlag', false)
      return await queryAreaData(dataForm).then(res => {
        if (res.success && res.data) {
          const arr = res.data.records
          const areaList = arr.map(item => {
            const obj = { dictCode: item.areaCode, dictName: item.areaName }
            return obj
          })
          return areaList
        }
      })
    },
    handleDetail(row) {
      this.rowId = row
      this.showPicDetail = true
      this.$emit('checkOtherDetail', this.showPicDetail)
    },
    backDetail(value) {
      this.showPicDetail = value
      this.$emit('checkOtherDetail', this.showPicDetail)
      this.$nextTick(() => {
        this.$refs.pictureTable.initTableData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
